<template>
  <div class="choice_JXS">
    <!-- 表单 -->
    <div class="biaodan">
      <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="PO单号">
          <div class="mendian">
            <el-input placeholder="请输入PO单号" v-model="ruleForm.name"></el-input>
            <div class="gong_y error_men" v-html="html"></div>
          </div>
        </el-form-item>
        <el-form-item label="选经销商（甲方）">
          <div class="mendian">
            <el-select v-model="value" clearable placeholder="请选择经销商">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div class="gong_y jiafang">菲仕兰有可能是甲方情况</div>
          </div>
        </el-form-item>
        <el-form-item label="选择协议模板">
          <el-select v-model="value" clearable placeholder="请选择协议模板">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店清算">
         <div class="mendian">
           <el-select v-model="value" clearable placeholder="请选择门店">
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
           <el-button class="gong_y mendian_button" type="primary" icon="el-icon-plus"></el-button>
         </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div class="biaoge_po">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="门店编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="门店名称"
          width="180">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="200"
          label="协议金额">
          <template slot-scope="scope">
            <el-input
              type="number"
              placeholder="请输入金额"
              v-model="scope.row.mony"
              class="table_input"
              clearable>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="协议内容">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-model="scope.row.str"
              placeholder="请输入协议内容"
              class="table_input"
              clearable>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="caozuo"
          show-overflow-tooltip
          width="100"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              class="table_button"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 生成核销单并下载协议模板 -->
    <div class="add_xiazai" @click="choice_click">生成核销单并下载协议模板</div>
  </div>
</template>

<script>
  export default{
    name:"choice_JXS",
    props:{},//接收子组件传过来的值
    data(){
      return{
        // 表格数据
        tableData: [{
          id: 'FDL202012321321',
          name: '绿源超市',
          mony:'1524',
          str: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 'FDL202012321321',
          name: '红孩子母婴店',
          mony:'456',
          str: '上海市普陀区金沙江路 1517 弄'
        }],
        // po单号输入提醒错误
        html:"<div class='error_men1 el-icon-warning'><span>PO单号有误，请核实</span></div>",
        // 选经销商
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',

        // input输入提醒
        labelPosition:"top",
        ruleForm: {
          name: '',
        },
        rules: {
           name: [
             { required: true, message: '请输入PO单号', trigger: 'blur' }
           ],
        }
      }
    },
    methods:{
      // 表格中的删除
      handleDelete(index, row) {
        console.log(index, row);
      },
      // 生成核销单并下载协议模板
      choice_click(){
        this.$emit("fun",2)
      },
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .choice_JXS{
    .biaodan{
      padding: 0 0.4rem;

      .mendian{
        position: relative;

        .gong_y{
          position: absolute;
          left: 103%;
          top: 50%;
          transform: translateY(-50%);
        }
        .mendian_button{
          border-radius: 0.1rem!important;
          padding: 0.12rem!important;
        }
        .jiafang{
          width: 100%;
          font-size: 0.2rem;
          color: #FE862F;
        }
        .error_men{
          width: 100%;

          >>> .error_men1{
            color: #FF5E5E;
            span{
              margin-left: 0.1rem;
              font-size: 0.2rem;
              color: #FF5E5E;
            }
          }
        }
      }
    }
    .biaoge_po{
      margin: 0.4rem 0.4rem;

      >>> .el-table th.is-leaf{
        border-bottom: 1px solid #CFECFF;
      }
      >>> .el-table__row .cell{
        color: #333;
        font-size: 0.22rem;
      }
      >>> .is-leaf .cell{
        color: #6FB0DB;
        font-size: 0.22rem;
      }
      .table_input{
        >>> .el-input__inner{
          border: 1px solid transparent!important;
          padding: 0!important;
        }
      }
      .table_button{
        border-radius: 0.6rem;
        background-color: #fff;
        border: 1px solid #FF5E5E;
        color: #FF5E5E;
      }
    }
    .add_xiazai{
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 0.22rem;
      color: #fff;
      background-color: #29A7FA;
      padding: 0.2rem 0.3rem;
      display: inline-block;
      margin: 0 0.3rem 0.45rem 0.3rem;
      border-radius: 0.4rem;
      cursor: pointer;
    }
  }
</style>
